<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            font-size: 0.8rem;
        }

        .parent-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh; /* 或者设置一个固定的高度 */
        }

        .container {
            margin: 30px;
            width: 400px;
            padding: 30px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

            display: flex;
            align-items: center;
            justify-content: center;
        }

        label {
            width: 300px;
            margin-bottom: 15px;
            display: flex block;
            align-items: center;
            justify-content: center;
        }

        input {
            padding: 15px;
            border: none;
            border-bottom: 1px #ccc solid;
            margin-bottom: 10px;
        }

        .input-group {
            width: 100%;
        }

        #checkcode {
            width: 50%;
            left: 0;
            margin-left: -15px;
            /* Add additional styling for checkcode */
        }


        .checkcodebox {
            position: relative;
            display: flex inline;
            height: 40px;
            width: 100px;
            left: 15px;
            top: -5px;
            border: 1px rgba(76, 175, 80, 0.5) solid;
            align-items: center;
            justify-content: center;
        }

        input[type="submit"], input[type="reset"] {
            background-color: rgba(76, 175, 80, 0.8);
            color: #fff;
            border: none;
            border-radius: 4px;
            padding: 10px 20px;
            cursor: pointer;
            margin: 10px 10px -10px;
        }


        #title {
            color: #FF6600;
            font-size: 1rem;
            font-weight: bold;
            display: block;
            margin-bottom: 20px;
            white-space: nowrap;
            overflow: hidden;
            border-right: 4px solid #000;
            animation: typing 2s steps(30, end) infinite; /* 假设标题有30个字符 */
        }

        @keyframes typing {
            from {
                width: 0;
            }
            to {
                width: 100%;
            }
        }

        .slideshow-container {
            position: relative;
            width: 100%; /* 或你想要的宽度 */
            height: 300px; /* 或你想要的高度 */
            overflow: hidden;
        }

        .slideshow {
            display: flex;
            animation: slideshow 10s infinite; /* 假设每张图片显示3.33秒 */
        }

        .banner {
            flex-shrink: 0;
            width: 100%;
            height: auto;
            animation: slide 10s infinite;
        }

        @keyframes slideshow {
            0% {
                transform: translateX(0);
            }
            33.33% {
                transform: translateX(-100%);
            }
            66.66% {
                transform: translateX(-200%);
            }
            100% {
                transform: translateX(0);
            }
        }

        @keyframes slide {
            0% {
                opacity: 1;
            }
            33.33% {
                opacity: 1;
            }
            66.66% {
                opacity: 1;
            }
            100% {
                opacity: 1;
            }
        }

        /* 为第一张图片设置初始状态 */
        .slideshow .banner:first-child {
            animation-delay: -10s;
        }

        /* 为第二张图片设置延迟 */
        .slideshow .banner:nth-child(2) {
            animation-delay: -6.66s;
        }

        /* 为第三张图片设置延迟 */
        .slideshow .banner:nth-child(3) {
            animation-delay: -3.33s;
        }

    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 创建 <style> 标签
            const styleElement = document.createElement('style');

            // 定义 CSS 样式规则
            const css = `
        .alert {
        font-family: "黑体", system-ui;
        font-size: 1rem;
        text-align: center;
        width: 300px;
        height: 50px;
        background-color: #fff;
        opacity: 0;
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 9999;
        padding: 10px;
        border-radius: 20px;
        transition: opacity 0.3s ease-in-out;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

        display: none;
        justify-content: center;
        align-items: center;
    }

    .alert-info {
        color: lightblue;
    }

    .alert-success {
        color: lightgreen;
    }

    .alert-warning {
        color: lightsalmon;
    }

    .alert-error {
        color: lightcoral;
    }
      `;

            // 将 CSS 样式规则添加到 <style> 标签中
            styleElement.appendChild(document.createTextNode(css));

            // 将 <style> 标签添加到 <head> 标签中
            document.head.appendChild(styleElement);
        });


        function alert_info(message) {
            my_alert("📚 info " + message, 'info');
        }

        function alert_warn(message) {
            my_alert("❗ warning " + message, 'warning');

        }

        function alert_error(message) {
            my_alert("❌ error " + message, 'error');
        }

        function alert_success(message) {
            my_alert("✅ success " + message, 'success');
        }

        function my_alert(message, level) {
            // const alertBox = document.getElementById('alertBox');
            const alertBox = document.createElement('div');
            alertBox.classList.add('alert');
            alertBox.id = 'alertBox';
            document.body.appendChild(alertBox);

            alertBox.classList.add('show');
            let show_css = 'alert-' + level;
            // 设置不同级别的样式
            alertBox.classList.add(show_css);

            // 显示消息内容
            alertBox.innerText = message;

            let fadeInTimer; // 定义一个变量用于存储淡入定时器的 ID
            let fadeOutTimer; // 定义一个变量用于存储淡出定时器的 ID


            // 清除之前的淡出定时器
            clearTimeout(fadeInTimer);
            clearTimeout(fadeOutTimer);

            // 点击触发淡入效果
            alertBox.style.display = 'flex';
            fadeInTimer = setTimeout(() => {
                alertBox.style.opacity = '1';
            }, 100);


            // 设置新的淡出定时器，在2秒后淡出alert框
            fadeOutTimer = setTimeout(() => {
                alertBox.style.opacity = '0';
                setTimeout(() => {
                    alertBox.remove();
                }, 1000);
            }, 1500);
        }
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 创建 <style> 标签
            const styleElement = document.createElement('style');

            // 定义 CSS 样式规则
            const css = `
        .error-input::placeholder {
            color: red;
            font-weight: bold;
        }
        .error-input {
            // border: 1px solid red;
            border-radius: 4px 4px 0 0;
            border-bottom: 1px solid red;
            animation: breathe 3s infinite;
            animation-delay: 1s;
        }
        @keyframes breathe {
            0% {
              opacity: 0.5;
              // box-shadow: 0 0 4px red;
              // transform: scale(1);
            }
            50% {
              opacity: 1;
              border-color: red;
              // transform: scale(1);
              // box-shadow: none;
            }
            100% {
              opacity: 0.5;
              // transform: scale(1);
              // box-shadow: 0 0 4px red;
            }
        }
      `;

            // 将 CSS 样式规则添加到 <style> 标签中
            styleElement.appendChild(document.createTextNode(css));

            // 将 <style> 标签添加到 <head> 标签中
            document.head.appendChild(styleElement);
        });

        // 显示错误提示信息
        function showErrorMessage(input, message) {
            // 将当前输入框添加错误样式
            input.placeholder = message;
            input.classList.add('error-input');
        }

        // 清除错误提示信息
        function clearErrorMessage(input) {
            // 移除当前输入框的错误样式
            if (input.classList.contains('error-input')) {
                input.classList.remove('error-input');
            }
        }

        // 失去焦点事件处理函数
        function validateInput(event) {
            const input = event.target; // 获取触发事件的输入框
            const value = input.value; // 获取输入框的值

            // 清除之前的错误提示信息和样式
            clearErrorMessage(input);

            // 非空校验
            if (value.trim() === '') {
                showErrorMessage(input, input.placeholder);
                return false
            } else {
                return true
            }
        }

        // 失去焦点事件处理函数
        function validateOther(event) {
            let value = event.target.value
            // 非空校验
            if (value.trim() === '') {
                alert_error("请输入")
                return false
            } else {
                return true
            }
        }

        /**
         * 获取输入框焦点触发的非空校验
         * @param validElementId 需要校验的元素id
         */
        function onFocusInputNotEmpty(validElementId) {

            const validElement = document.getElementById(validElementId);
            // 绑定失去焦点事件的处理函数
            validElement.addEventListener('blur', validateInput);
        }

        /**
         * 提交事件输入框非空校验
         * @param elementIds 需要校验的元素id集合
         * @returns {boolean} 校验结果  true:校验通过  false:校验未通过
         */
        function onSubmitInputNotEmpty(elementIds) {
            let elementList = [];
            elementIds.forEach(function (elementId) {
                elementList.push(document.getElementById(elementId));
            })

            let valid_result = true;

            elementList.forEach(function (input) {
                // 获取输入框的值
                const value = input.value;
                // 清除之前的错误提示信息和样式
                clearErrorMessage(input);
                // 非空校验
                if (value.trim() === '') {
                    showErrorMessage(input, input.placeholder);
                    valid_result = false
                }
            });
            return valid_result
        }

        /**
         * JSON 格式校验
         * @param elementId 元素Id
         * @returns {boolean} 校验结果  true:校验通过  false:校验未通过
         */
        function validJson(elementId) {
            let input = document.getElementById(elementId);
            const value = input.value; // 获取输入框的值

            let result = false;
            // 首先校验输入是否为纯数字
            if (/^\d+$/.test(value)) {
                console.log("输入为纯数字");
                result = false;
            } else {
                try {
                    JSON.parse(value);
                    result = true; // JSON 格式有效
                } catch (error) {
                    console.log("json error: ", error);
                }
            }
            console.log("校验结果 --> ", result);
            return result;
        }


        function onFocusTextareaNotEmpty(validElementId) {
            const validElement = document.getElementById(validElementId);
            // 绑定失去焦点事件的处理函数
            validElement.addEventListener('blur', validateInput);
        }


        function validGender() {
            const radios = document.getElementsByName('gender');
            let formValid = false;

            for (let i = 0; i < radios.length; i++) {
                if (radios[i].checked) {
                    formValid = true;
                    break;
                }
            }

            if (!formValid) {
                alert_error('请选择性别');
                return false;
            }

        }

        // 校验年龄在18-25岁之间
        function validAge() {
            console.log("年龄 --> ");
            const age = document.getElementsByName("age")[0].value;
            console.log("年龄 --> ", age);
            if (age < 18 || age > 25) {
                alert_error("年龄必须在18-25岁之间");
                return false;
            }
            return true;
        }

        function validPassword(inputPassword) {
            const passwordPattern = /^\w{6,18}$/;
            if (passwordPattern.test(inputPassword)) {
                return true;
            }
            alert_error("密码必须为6-18位数字字母下划线组合");
            return false;
        }

        function comparePasswords(password1, password2) {
            // 密码校验规则
            if (password1 === password2) {
                return true;
            }
            alert_error("两次输入的密码不一致，请重新输入");
            return false;

        }

    </script>
</head>
<body>
<div class="parent-container">
    <div class="container">
        <p><span id="title">南京信息职业技术学院2024志愿者招募</span>&nbsp;&nbsp;&nbsp;注册登记</p>
        <br>
        <div id="img" class="slideshow-container">
            <div class="slideshow">
                <img src="img/banner1.jpg" alt="banner1" class="banner">
                <img src="img/banner2.jpg" alt="banner2" class="banner">
                <img src="img/banner3.jpg" alt="banner3" class="banner">
            </div>
        </div>
    </div>
    <div class="container">
        <form method="POST" action="#" name="my_form" id="my_form">
            <label>
                <input type="text" class="input-group" id="username" name="username" max="20"
                       placeholder="请输入姓名">
            </label>
            <label>
                <input type="text" class="input-group" id="sex" name="sex" max="20" readonly
                       placeholder="性别" width="20%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio" name="gender" value="male" size="20%">男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio" name="gender" value="female" size="20%">女&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </label>
            <label>
                <input type="text" class="input-group" id="age" name="age" max="20"
                       placeholder="请输入年龄">
            </label>

            <label>
                <input type="password" class="input-group" id="password" name="password" max="20"
                       placeholder="请输入密码">
            </label>
            <label>
                <input type="password" class="input-group" id="password2" name="password2" max="20"
                       placeholder="确认密码">
            </label>

            <label>
                <input type="password" class="input-group" id="phone" name="phone" max="20"
                       placeholder="请输入手机号">
            </label>
            <label>
                <input type="reset" value="重 置" class="input-group" id="resetButton">
                <input type="submit" value="提 交" class="input-group" id="submitButton">
            </label>
        </form>
    </div>

    <div class="container">
        <h5>
            班级：数媒技术2301 &nbsp;&nbsp;
            姓名：杨顺南 &nbsp;&nbsp;
            学号：230701140
        </h5>
    </div>
</div>

</body>

<script>
    onFocusInputNotEmpty("username");
    onFocusInputNotEmpty("password");
    onFocusInputNotEmpty("password2");
    onFocusInputNotEmpty("age");
    onFocusInputNotEmpty("phone");


    function validFormSubmit() {
        return onSubmitInputNotEmpty(["username", "password", "password2", "age", "phone"]) && validAge() && validGender() && valid
    }
</script>

<script>
    // 获取表单元素
    const form = document.getElementById('my_form');

    // 表单提交事件处理函数
    function handleSubmit(event) {
        event.preventDefault(); // 阻止表单的默认提交行为
        if (validateForm()) {
            return true;
        }
    }

    // 表单校验函数
    function validateForm() {
        // 执行表单校验逻辑，返回校验结果
        // 如果校验通过，返回 true；否则返回 false
        return validFormSubmit()
    }

    // 绑定提交按钮的点击事件
    submitButton.addEventListener('click', handleSubmit);

</script>

</html>
